<template>
  <div class="hello">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >

       <!--轮播图 -->
<van-swipe class="my-swipe" v-if="cimg.length>0" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="v in cimg" :key="v.id"  @click.native="swipdetail(v.musicId)">
    <img :src="v.carouselUrl" alt="">
  </van-swipe-item>

</van-swipe>

      <!--用户列表 -->

        <div v-for="(v, index) in list" :key="index" class="p1">
          <img :src="v.avaUrl" alt="" @click="detail(v)"  class="lbt"/>
          <p>{{ v.name }}</p>
          <p>{{ v.phone }}</p>
          <center>

             <mt-button type="danger" size="small" @click="addp(v)"
            >+购物车</mt-button
          >
          </center>

        </div>
      </van-list>
    </van-pull-refresh>
    <mt-header fixed title="首页"></mt-header>
  </div>
</template>
<script>
import url from "../tools/url"
import { Toast } from "mint-ui";
export default {
  name: "HelloWorld",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageNo: 1,
      isLoading: false,
      cimg:[]
    };
  },
  methods: {
      //轮播图详情

    swipdetail(id){

this.$router.push({

    path:"/Swipdetail",

    query:{musicId:id}

});

    },

    //下拉加载
    onRefresh() {
      console.log("下拉加载");
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pageNo}&pageSize=10`;
    this.axios.post(url.GET_LIST, str)
    .then(res=>{

      if(res.data.code == 200){
           this.isLoading = false;
           this.list= res.data.data.list.concat(this.list)
           if(res.data.data.isLastPage){
              this.finished = true;
           }
           this.pageNo++;
      }

    })

   },
    onLoad() {
      console.log("加载数据");
      // axios请求
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pageNo}&pageSize=10`;
      this.axios
        .post("/user/getUserList", str)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            // 加载状态结束
            this.loading = false;

            res.data.data.list.forEach((item, index, arr) => {
              item.count = 1;
              item.isCheck = false;
              item.price = 1000;
            });
            this.list = this.list.concat(res.data.data.list);
            // 数据全部加载完成
            if (res.data.data.isLastPage) {
              this.finished = true;
            }
            this.pageNo++;
          } else {
            Toast(res.data.message);
            this.$router.push("/Login");
          }
        });
    },
    addp(v) {
      this.$store.commit("addp", v);
    },
    detail(v) {
      this.$router
        .push({
          path: "/Detail",
          query: {
            v: v,
          },
        })
        .catch((e) => {});
    },
  },
  mounted() {
    //请求轮播图
     var token =sessionStorage.getItem("token");
    var str =`token=${token}`
    this.axios.post(url.CAROUSEL,str)
    .then(res=>{
      console.log(res);
      if(res.data.code==200){
          this.cimg =res.data.data;

      }else{
        this.$router.push("/Login");
      }
    })

    // var token =  sessionStorage.getItem("token");
    //       var str = `token=${token}&pageNo=1&pageSize=10`;
    //   this.axios.post("https://bufferc.store:8443/user/getUserList",str)
    //   .then(res=>{
    //     console.log(res)
    //     res.data.data.list.forEach((item, index, arr) => {
    //   item.count = 1;
    //   item.ischeck = false;
    //    });
    //    this.list = res.data.data.list;
    //   })
    // var list = [
    //   { pname: "派大星1号", pid:1,  price: "￥"+100, pimg: require("../assets/1.jpg") },
    //   { pname: "派大星2号", pid:2,  price: "￥"+122, pimg: require("../assets/2.jpg") },
    //   { pname: "派大星3号", pid:3,  price: "￥"+178, pimg: require("../assets/3.jpg") },
    //   { pname: "派大星4号", pid:4,  price: "￥"+190, pimg: require("../assets/4.jpg") },
    //   { pname: "派大星5号", pid:5,  price: "￥"+188, pimg: require("../assets/5.jpg") },
    //   { pname: "派大星6号", pid:6,  price: "￥"+188, pimg: require("../assets/6.jpg") },
    // ];
  },
};
</script>
<style  scoped>
img {
  height: 100%;
  width: 100%;

}
.p1 {
  margin: 6px 6px 6px 6px;
  display: inline-block;
  height: 40%;
  width: 47%;
}
.hello {
  margin-top: 50px;
  margin-bottom: 60px;
  /* display: flex;
        justify-content: space-around;
        flex-wrap: wrap; */
}
img.lbt{
  height: 200px;
  width: 200px;


}
p{
  text-align: center;
}




</style>
